<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>时间套餐自驾</title>
<script type="text/javascript" src="${cxt }/js/jquery-3.2.1.js" ></script>
<link rel="stylesheet" href="${cxt }/css/yk_base.css" />
<link rel="stylesheet" href="${cxt }/css/yk_myCenter.css" />
<link rel="stylesheet" href="${cxt }/css/yk_reg.css" />
<link rel="stylesheet" href="${cxt }/css/yk_selfDriving.css" />
<link rel="stylesheet" href="${cxt }/css/header.css"/>
<script type="text/javascript" src="${cxt }/js/yk_selfDriving.js" ></script>
<script type="text/javascript" src="${cxt }/js/city.js" ></script>
</head>
<body>
	<div style="width: 100%;background: black;">
		<jsp:include page="../header.jsp"></jsp:include>
		</div>
		<div class="zc_headlist">
			<div class="dz_conbox">
				<div class="fl">
					<div class="choose_ul">
						<div class="fl">
							<label class="c_car">
								取车
							</label>
							<input type="text" class="ipcity citySD" name="fromCity" id="fromCity" placeholder="请选择城市"/>
							<div class="yc_city" id="city1">
								<select id="city" class="szcity pointer" size="7">
									
								</select>
							</div>
							<input type="text" class="iptst citySD" name="sentAddress" id="sentAddress"  placeholder="请选择送车地址"/>
							<div class="btn">
								<label class="cartxt pointer">
									送车上门
									<span class="zc_switch_c pointer"></span>
								</label>	
							</div>
						</div>
						<div class="fl cardate">
							<label class="c_date">
								取车时间
								<div class="indexjmhs">周五</div>
							</label>
							<div class="fl">
								<input type="date" value="" class="iptdate date_iptcalendar" name="fromDate" id="fromDate" />
							</div>
							<div class="cartime fl ">
								<input type="text" value="10:00" default-value="08:00-12:00" class="ipttime citySD" name="fromHourMinute" id="fromHourMinute"/>
								<div class="sz_time" id="time1">
									<ul>
										<li>08:00</li>
										<li>08:30</li>
										<li>09:00</li>
										<li>09:30</li>
										<li>10:00</li>
										<li>10:30</li>
										<li>11:00</li>
										<li>11:30</li>
									</ul>
									<ul>
										<li>12:00</li>
										<li>12:30</li>
										<li>13:00</li>
										<li>13:30</li>
										<li>14:00</li>
										<li>14:30</li>
										<li>15:00</li>
										<li>15:30</li>
									</ul>
									<ul>
										<li>16:00</li>
										<li>16:30</li>
										<li>15:00</li>
										<li>15:30</li>
										<li>16:00</li>
										<li>16:30</li>
										<li>17:00</li>
										<li>17:30</li>
									</ul>
									<ul>
										<li>18:00</li>
										<li>18:30</li>
										<li>19:00</li>
										<li>19:30</li>
										<li>20:00</li>
										<li>20:30</li>
										<li>21:00</li>
										<li>21:30</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="fl zc_ma">
							<label class="c_car">
								还车
							</label>
							<input type="text" class="ipcity citySD" name="toCity" id="toCity" placeholder="请选择城市"/>
							<input type="text" class="iptst citySD" name="sentAddress" id="sentAddress"  placeholder="请选择取车地址"/>
							<div class="btn">
								<label class="cartxt pointer">
									上门取车
									<span class="zc_switch_c pointer"></span>
								</label>	
							</div>
						</div>
						<div class="fl cardate zc_ma">
							<label class="c_date">
								还车时间
								<div class="indexjmhsx">2天</div>
							</label>
							<div class="fl">
								<input type="date" value="" class="iptdate date_iptcalendar" name="fromDate" id="fromDate" />
							</div>
							<div class="cartime fl ">
								<input type="text" value="10:00" default-value="08:00-12:00" class="ipttime citySD"  name="toHourMinute" id="toHourMinute"/>
								<div class="sz-timex">
									<ul>
										<li>08:00</li>
										<li>08:30</li>
										<li>09:00</li>
										<li>09:30</li>
										<li>10:00</li>
										<li>10:30</li>
										<li>11:00</li>
										<li>11:30</li>
									</ul>
									<ul>
										<li>12:00</li>
										<li>12:30</li>
										<li>13:00</li>
										<li>13:30</li>
										<li>14:00</li>
										<li>14:30</li>
										<li>15:00</li>
										<li>15:30</li>
									</ul>
									<ul>
										<li>16:00</li>
										<li>16:30</li>
										<li>15:00</li>
										<li>15:30</li>
										<li>16:00</li>
										<li>16:30</li>
										<li>17:00</li>
										<li>17:30</li>
									</ul>
									<ul>
										<li>18:00</li>
										<li>18:30</li>
										<li>19:00</li>
										<li>19:30</li>
										<li>20:00</li>
										<li>20:30</li>
										<li>21:00</li>
										<li>21:30</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="choose_div">
					<span>
						租期：
						<em class="bred toDateWeek">2天</em>
						不限里程
					</span>
					<br />
					<a href="javascript:void(0)" class="search_btn">立即选车</a>
				</div>
			</div>
		</div>
		<div style="width: 100%;background: #F2F3F5;">
			<div class="zj_main">
				<div class="zj_leftlist fl">
					<div class="zj_boxshd">
						<div class="cl_lbox bdbtm">
							<p class="zj_left_title">车型</p>
							<ul class="chexing">
								<li class="check">
									<a class="pointer">
										<i class="zj_cx_bx"></i>
										<i class="cartxt" >不限</i>
									</a>
								</li>
								<li>
									<a class="pointer">
										<i class="zj_cx_sdjc"></i>
										<i class="cartxt">手动紧凑型</i>
									</a>
								</li>
								<li>
									<a class="pointer">
										<i class="zj_cx_jj"></i>
										<i class="cartxt">经济型</i>
									</a>
								</li>
								<li>
									<a class="pointer">
										<i class="zj_cx_sw"></i>
										<i class="cartxt">商务型</i>
									</a>
								</li>
								<li>
									<a class="pointer">
										<i class="zj_cx_hh"></i>
										<i class="cartxt">豪华型</i>
									</a>
								</li>
								<li>
									<a class="pointer">
										<i class="zj_cx_suv"></i>
										<i class="cartxt">SUV</i>
									</a>
								</li>
								<li>
									<a class="pointer">
										<i class="zj_cx_zsw"></i>
										<i class="cartxt">6至15座商务</i>
									</a>
								</li>
								<li>
									<a class="pointer">
										<i class="zj_cx_gx"></i>
										<i class="cartxt">个性车</i>
									</a>
								</li>
								<li>
									<a class="pointer">
										<i class="zj_cx_dd"></i>
										<i class="cartxt">电动车</i>
									</a>
								</li>
							</ul>
						</div>
						<div class="cl_lbox bdbtm">
							<p class="zj_left_title">
								价格
								<span class="sma12">(元)</span>
							</p>
							<ul class="pri_range">
								<li class="bar1">
									<a>
										<span class="w40" style="background-color: #fabe00;" id="bar1"></span>
									</a>
								</li>
								<li class="bar2">
									<a>
										<span class="w40" id="bar2"></span>
									</a>
								</li>
								<li class="bar3">
									<a>
										<span class="w40" id="bar3"></span>
									</a>
								</li>
								<li class="bar4">
									<a>
										<span class="w40" id="bar4"></span>
									</a>
								</li>
								<li class="bar5">
									<a>
										<span class="w70" id="bar5"></span>
									</a>
								</li>
							</ul>
							<ul class="pri_num">
								<li class="pri1 w37 checked" id="pri1">不限</li>
								<li class="pri2 w35" id="pri2">0</li>
								<li class="pri3 w42" id="pri3">150</li>
								<li class="pri4 w42" id="pri4">300</li>
								<li class="pri5 w37" id="pri5">500</li>
								<li class="pri6 w44" id="pri6">500+</li>
							</ul>
						</div>
						<div class="cl_lbox bdbtm">
							<p class="zj_left_title">品牌</p>
							<ul class="car_brand">
								<li>
									<a style="color: #fabe00;" id="bx">不限</a>
								</li>
								<li>
									<a href="javascript:void(0)">奥迪</a>
								</li>
								<li>
									<a href="javascript:void(0)">宝马</a>
								</li>
								<li>
									<a href="javascript:void(0)">别克</a>
								</li>
								<li>
									<a href="javascript:void(0)">比亚迪</a>
								</li>
								<li>
									<a href="javascript:void(0)">马自达</a>
								</li>
								<li>
									<a href="javascript:void(0)">现代</a>
								</li>
								<li>
									<a href="javascript:void(0)">福特</a>
								</li>
								<li>
									<a href="javascript:void(0)">凯迪拉克</a>
								</li>
								<li>
									<a href="javascript:void(0)">丰田</a>
								</li>
								<li>
									<a href="javascript:void(0)">大众</a>
								</li>
								<li>
									<a href="javascript:void(0)">玛莎拉蒂</a>
								</li>
								<li>
									<a href="javascript:void(0)">保时捷</a>
								</li>
								<li>
									<a href="javascript:void(0)">帕加尼</a>
								</li>
								<li>
									<a href="javascript:void(0)">法拉利</a>
								</li>
								<li>
									<a href="javascript:void(0)">科尼赛克</a>
								</li>
								<li>
									<a href="javascript:void(0)">迈巴赫</a>
								</li>
								<li>
									<a href="javascript:void(0)">劳斯莱斯</a>
								</li>
								<li>
									<a href="javascript:void(0)">布加迪威龙</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="zj_rightlist fl">
					<div class="zc_boxshd">
						<ul class="right_tab">
							<li class="tab w120" onclick="changeOrderType('short')">
								<a>短租自驾</a>
							</li>
							<li class="tab w142 cur" onclick="changeOrderType('week')">
								<a>
									周租套餐
									<i>(7-27天)</i>
								</a>
							</li>
							<li class="tab w142" onclick="changeOrderType('month')">
								<a>
									月租套餐
									<i>(28天+)</i>
								</a>
							</li>
							<li class="tab w142" onclick="changeOrderType('year')">
								<a>
									年租套餐
									<i>(365天)</i>
								</a>
							</li>
						</ul>
						<p class="yel_tips">
							<span class="gift_relittle">亲，如果您觉得短租不合适，可以选择其他的套餐呢！</span>
						</p>
						<div class="clist_ct">
							<table class="clist_tb" cellpadding="0" cellspacing="0">
								<tbody class="carList">
									<c:forEach items="${mycenter}" var="mycenter">
									<tr class="clist_tr">
										<td class="pic">
											<img src="${cxt}/${cars.carmodelimage}" width="230" height="130"/>
										</td>
										<td class="info">
											<p class="name">${cars.carmodeltype}</p>
											<p class="oth">${cars.carmodelname}|乘坐${cars.seating}人</p>
											<div class="alltips">
												<i class="tip bh_remen">热门车</i>
												<i class="tip bh_xin">新车型</i>
											</div>
										</td>
										<td class="ord">
											<div class="order_box">
												<div class="od_price">
													<div class="houfu"></div>
													<div class="car_price" style="z-index: 1;">
														<span class="pri_ye">
															<em class="rmb">￥</em>
															<em class="num">${cars.rentcash}</em>
															<em class="unit">/日均</em>
														</span>
														<div class="sz_priceTotal pointer" >
															<div class="fl cl">
																<span class="fl pri_all">
																	<em class="total">总价：</em>
																	<em class="rmb">￥</em>
																	<em class="num">475</em>
																	<a href="javascript:void(0)" class="zcargray"></a>
																</span>
															</div>
														</div>
													</div>
												</div>
												<a href="${cxt}/content/order" class="od_btn" id="bookOrder101">租车</a>
											</div>
										</td>
									</tr>
									</c:forEach>
									<!-- <tr class="clist_tr">
										<td class="pic">
											<img src="img/yk_ly.jpg" width="230" height="130"/>
										</td>
										<td class="info">
											<p class="name">大众朗逸</p>
											<p class="oth">三厢|1.6自动|乘坐5人</p>
											<div class="alltips">
												<i class="tip bh_remen">热门车</i>
												<i class="tip bh_xin">新车型</i>
											</div>
										</td>
										<td class="ord">
											<div class="order_box">
												<div class="od_price">
													<div class="houfu"></div>
													<div class="car_price" style="z-index: 1;">
														<span class="pri_ye">
															<em class="rmb">￥</em>
															<em class="num">95</em>
															<em class="unit">/日均</em>
														</span>
														<div class="sz_priceTotal pointer" >
															<div class="fl cl">
																<span class="fl pri_all">
																	<em class="total">总价：</em>
																	<em class="rmb">￥</em>
																	<em class="num">475</em>
																	<a href="javascript:void(0)" class="zcargray"></a>
																</span>
															</div>
														</div>
													</div>
												</div>
												<a href="javascript:void(0)" class="od_btn" id="bookOrder101">租车</a>
											</div>
										</td>
									</tr>
									<tr class="clist_tr">
										<td class="pic">
											<img src="img/yk_ly.jpg" width="230" height="130"/>
										</td>
										<td class="info">
											<p class="name">大众朗逸</p>
											<p class="oth">三厢|1.6自动|乘坐5人</p>
											<div class="alltips">
												<i class="tip bh_remen">热门车</i>
												<i class="tip bh_xin">新车型</i>
											</div>
										</td>
										<td class="ord">
											<div class="order_box">
												<div class="od_price">
													<div class="houfu"></div>
													<div class="car_price" style="z-index: 1;">
														<span class="pri_ye">
															<em class="rmb">￥</em>
															<em class="num">95</em>
															<em class="unit">/日均</em>
														</span>
														<div class="sz_priceTotal pointer" >
															<div class="fl cl">
																<span class="fl pri_all">
																	<em class="total">总价：</em>
																	<em class="rmb">￥</em>
																	<em class="num">475</em>
																	<a href="javascript:void(0)" class="zcargray"></a>
																</span>
															</div>
														</div>
													</div>
												</div>
												<a href="javascript:void(0)" class="od_btn" id="bookOrder101">租车</a>
											</div>
										</td>
									</tr> -->
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div style="width: 100%;">
			<div class="footmenu">
					<dl class="wyd">
						<dt>租车预定说明</dt>
						<dd>
							<a href="javascript:void(0)" target="_blank" >服务时间</a>
							<a href="javascript:void(0)" target="_blank">待租车况</a>
							<a href="javascript:void(0)" target="_blank">服务预定</a>
							<a href="javascript:void(0)" target="_blank">短租产品</a>
							<a href="javascript:void(0)" target="_blank">租车资格</a>
							<a href="javascript:void(0)" target="_blank">取还车说明</a>	
						</dd>
					</dl>
					<dl class="why">
						<dt>会员管理</dt>
						<dd>
							<a href="javascript:void(0)" target="_blank" >会员章程</a>
							<a href="javascript:void(0)" target="_blank" >会员细则</a>
							<a href="javascript:void(0)" target="_blank" >定级积分</a>
						</dd>
					</dl>
					<dl class="wsj">
						<dt>紧急事务处理</dt>
						<dd>
							<a href="javascript:void(0)" target="_blank" >保险责任</a>
							<a href="javascript:void(0)" target="_blank" >理赔说明</a>
							<a href="javascript:void(0)" target="_blank" >事故处理</a>
							<a href="javascript:void(0)" target="_blank" >救援及备用车</a>
						</dd>
					</dl>
					<dl class="wfy">
						<dt>租车费用及结算</dt>
						<dd>
							<a href="javascript:void(0)" target="_blank" >价格说明</a>
							<a href="javascript:void(0)" target="_blank" >结算流程</a>
							<a href="javascript:void(0)" target="_blank" >储值卡</a>
							<a href="javascript:void(0)" target="_blank" >积分</a>
						</dd>
					</dl>
					<dl class="wbz">
						<dt>帮助中心</dt>
						<dd>
							<a href="javascript:void(0)" target="_blank" >常见问题</a>
							<a href="javascript:void(0)" target="_blank" >新手上路</a>
							<a href="javascript:void(0)" target="_blank" >服务规则</a>
						</dd>
					</dl>
			</div>
		</div>
		<div style="background: #1B2B3B;width: 100%;">
			<div class="zc_main" style="border-top: 0px;" >
				<div class="zit">
					<a href="javascript:void(0)" style="margin-left: 0px;">关于我们</a>
					<a href="javascript:void(0)">投资者关系</a>
					<a href="javascript:void(0)">新闻中心</a>
					<a href="javascript:void(0)">加盟合作</a>
					<a href="javascript:void(0)">隐式保护</a>
					<a href="javascript:void(0)">网站导航</a>
					<a href="javascript:void(0)">联系我们</a>
					<a href="javascript:void(0)">招贤纳士</a>
					<a href="javascript:void(0)" style="margin-left: 407px;margin-right: 0px;">English>></a>
				</div>
				<div class="copyright">
					<span>Copyright@2008-2018 www.zuche.com All Rights Reserved. 北京神州汽车租赁有限公司 京ICP备10005002号 京公网安备号 11010502026705</span>
					<span style="margin-left: 34px;">如果您对神州租车网站有任何意见，欢迎发送邮件到 <a href="javascript:void(0)">web@zuche.com</a> </span>
				</div>
				<div class="tupian">
					<img src="img/yk_kexin.png" />
					<img src="img/yk_chengxin.png" />
				</div>
			</div>
		</div>
</body>
</html>